<template>
	<tn-navbar fixed :bordered="false" home-icon="">登记车辆详情</tn-navbar>

	<view>
		<view class="  tn-shadow-md tn-p-sm tn-m-sm tn-radius">
			<view class="tn-flex tn-flex-start-start tn-text-lg tn-p-sm">
				<view class="tn-flex-1 tn-teal-dark_text tn-bold">
					<tn-icon name="taxi" color="tn-blue" size="40" /> <text class="tn-ml tn-text-bold">{{ carPlate }}</text>
				</view>
				<view @click="openEditPopup" class="tn-mr-lg">
					<tn-button icon="edit" class="tn-blue_bg">修改</tn-button>
				</view>
				<view @click="deleteRecordModal">
					<tn-button icon="delete-fill" class="tn-red_bg">删除</tn-button>
				</view>
			</view>

			<view v-for="(item, index) in parkingDetails" :key="index" text-color="tn-grey" height="20rpx" 
			class="  tn-round  tn-gradient-bg__blue-light tn-mt-sm tn-p-sm tn-text-center">
				<view class="tn-flex justify-between tn-text-xs ">
					<view class="">
						<text>{{ item.label }}:</text>
					</view>
					<view class="">
						<text>{{ item.value }}</text>
					</view>
				</view>
			</view>
			<view class="tn-m tn-border-top tn-gray-disabled_border"></view>
			<view class="tn-radius tn-mt tn-p tn-gradient-bg__cyan-light ">
				<view>备注</view>
				<view>这是一辆蓝色的小轿车，经常停在A区。</view>

			</view>
			<view class="  tn-flex justify-around tn-mt-xl">
				<tn-button @click="confirmEdit" width="30%" bg-color="#4A90E2" text-color="tn-white"><text class="tn-text-bold">车辆续费</text></tn-button>
				<tn-button @click="confirmEdit" width="30%%" bg-color="#50E3C2" text-color="tn-white"><text class="tn-text-bold">车辆退费</text></tn-button>

				<tn-bubble-box :options="moreOption" position="bottom" @click="confirmBubble">
					<text class="">更多操作</text>
				</tn-bubble-box>
			</view>

			<view class="tn-tabbar-height tn-h-screen"></view>
		</view>
		<!-- <view class="tn-white_bg tn-shadow tn-mt tn-ridius">
            <view class="content">
                <view class="tn-mb-xl">
                    <tn-title size="lg" title="出入记录" mode="hLine" sub-title="Tuniao" assist-color="tn-blue" />
                </view>
              
            </view>
        </view> -->

		<tn-popup v-model="isPopupVisible" width="100%" open-direction="top" top="45">
			<view class="tn-m-sm tn-p-sm">
				<tn-form ref="formRef" :model="formData" label-position="top">
					<tn-form-item label="所属车场">
						<tn-input v-model="formData.carPlate" disabled :custom-class="{ color: '#00D886' }"></tn-input>
					</tn-form-item>
					<tn-form-item label="车牌">
						<tn-input v-model="formData.carPlate" disabled :custom-class="{ color: '#00D886' }"></tn-input>
					</tn-form-item>
					<tn-form-item label="车主姓名">
						<tn-input v-model="formData.newCarPlate"></tn-input>
					</tn-form-item> 
					<tn-form-item label="车主电话">
						<tn-input v-model="formData.newCarPlate"></tn-input>
					</tn-form-item> 
					<tn-form-item label="计费车型" prop="carType" required>
						<view @click="openEditCarType">
							<tn-input style="pointer-events:none" :model-value="formData.carType" placeholder="请选择车型" />
						</view>

					</tn-form-item>
					
					<tn-form-item label="车型" prop="carType" required>
									<view @click="openEditCarType">
										<tn-input style="pointer-events:none" :model-value="formData.carType" placeholder="请选择车型" />
									</view>
					
								</tn-form-item>
					<tn-form-item label="地址">
						<tn-input v-model="formData.newCarPlate"></tn-input>
					</tn-form-item> 		
					<tn-form-item label="备注">
						<tn-input v-model="formData.newCarPlate"></tn-input>
					</tn-form-item>
					<view class="tn-flex justify-between">
						<tn-button @click="closePopup">取消</tn-button>
						<tn-button @click="confirmEdit">确认</tn-button>
					</view>
				</tn-form>
			</view>
		</tn-popup>

		<!-- 车型选择 -->

		<tn-picker v-model="formData.carType" v-model:open="openPicker" :data="CAR_TYPES" @confirm="confirmCarType" @close="closeCarType" />

		<tn-modal ref="modalRef" />
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import TnTimeLine from "tnuiv3p-tn-time-line/time-line.vue";
	import TnTimeLineItem from "tnuiv3p-tn-time-line/time-line-item.vue";
	import TnTimeLineData from "tnuiv3p-tn-time-line/time-line-data.vue";
	import { CAR_TYPES } from "@/utils/dict";
	import { timeLineData } from '@/utils/mock';
	import type { TnModalInstance } from '@/uni_modules/tuniaoui-vue3'
	import { goBack } from "@/utils/tnUtil";
	const carPlate = ref("浙ABC1123");
	const isPopupVisible = ref(false);
	const formData = ref({
		carPlate: "",
		newCarPlate: "",
		carType: "",
	});
	const moreOption = ref([{ text: '暂停/启用', value: 0 }, { text: '车牌关联', value: 0 },
	{ text: '管理车位', value: 0 }]);
	const parkings = ref();
	const parkingDetails = ref([
		{ id: 1, label: "姓名", value: "演示车场" },
		{ id: 2, label: "电话", value: "002" },
		{ id: 2, label: "地址", value: "临时车" },
		{ id: 2, label: "有效期", value: "2024年10月30日" },
		{ id: 2, label: "状态", value: "正常" },
		{ id: 2, label: "入场备注", value: "入场备注" },
	]);

	const openEditPopup = () => {
		formData.value.carPlate = carPlate.value;
		formData.value.newCarPlate = carPlate.value;
		isPopupVisible.value = true;
	};

	const closePopup = () => {
		isPopupVisible.value = false;
	};
	const confirmEdit = () => {
		// 确认修改逻辑
		closePopup();
	};

	const openPicker = ref(false);
	const openEditCarType = () => {
		openPicker.value = true;
	};

	const closeCarType = () => {
		openPicker.value = false;
	};

	const confirmCarType = (value) => {
		console.log('changeCarType', value);
		formData.value.carType = value
	};

	const modalRef = ref<TnModalInstance>();

	const deleteRecordModal = () => {
		// 删除记录逻辑 

		modalRef.value?.showModal({
			title: '提示',
			content: '是否删除当前在场车辆',
			confirmText: '确定',
			cancelText: '取消',
			showCancel: true,
			cancel: () => {

				return true;

			},
			confirm: () => {
				deleteRecord();
			},
		})
	};
	// 确认选择器的选择
	const confirmBubble = (value) => {
			console.log('confirmBubble=>', value); 
				console.log('confirmBubble=>', moreOption.value[value].text); 
			if(value==0){
				return ;
			}
			if(value==1){
				return ;
			}
			if(value==2){
				return ;
			}
		// closePicker(); // 关闭选择器
	};
	const deleteRecord = () => {
		// 删除记录逻辑 

		goBack()
	};
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		width: 100%;
		padding: 30rpx;

		.time-line {
			&__title {
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.image-pic {
		border: 1rpx solid #f8f7f8;
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: center;
		border-radius: 18rpx;
	}

	.image-design {
		padding: 180rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

</style>
